<template>
  <div class="app-container">
    <!-- Pipline维护 -  列表 -  页 -->
    <el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="queryParams.projectName" placeholder="请填写项目名称"></el-input>
      </el-form-item>
      <el-form-item label="销售员" prop="salemanName">
        <el-input v-model="queryParams.salemanName" placeholder="请填写销售员"></el-input>
      </el-form-item>
      <el-form-item label="归属地" prop="projectLocation">
        <el-input v-model="queryParams.projectLocation" placeholder="请填写归属地"></el-input>
      </el-form-item>
      <el-form-item label="项目状态" prop="projectStatus">
        <el-select v-model="queryParams.projectStatus" placeholder="请选择当前状态" clearable>
          <el-option v-for="(item,index) in dictData.projectStatus" :key="index" :label="item.dictLabel" :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryFn">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQueryFn">重置</el-button>
        <el-button type="success" icon="el-icon-plus" size="mini" @click="operationFn('add',null)">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableData" :fit="true" style="width:100%;">
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column label="项目名称" prop="projectName"></el-table-column>
      <el-table-column label="项目负责人" prop="principalName"></el-table-column>
      <el-table-column label="销售员" prop="salemanName"></el-table-column>
      <el-table-column label="归属地" prop="projectLocation"></el-table-column>
      <el-table-column label="项目类型">
        <template slot-scope="scope">
          {{ selectDictLabel(dictData.projectType, scope.row.projectType)}}
        </template>
      </el-table-column>
      <el-table-column label="合同金额(万)" prop="projectAmount"></el-table-column>
      <el-table-column label="净合同额(万)" prop="netContractAmount"></el-table-column>
      <el-table-column label="预计启动时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.planStartTime,'{y}-{m}-{d}') }}
        </template>
      </el-table-column>
      <el-table-column label="预计时长(月)" prop="planTime"></el-table-column>
      <el-table-column label="是否立项">
        <template slot-scope="scope">
          {{ selectDictLabel(dictData.approval, scope.row.approval) }}
        </template>
      </el-table-column>
      <el-table-column label="项目状态">
        <template slot-scope="scope">
          {{ selectDictLabel(dictData.projectStatus, scope.row.projectStatus)}}
        </template>
      </el-table-column>
      <!-- <el-table-column label="成员">
        <template slot-scope="scope">
          {{scope.row.member | fltMember}}
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="备注" prop="remark"></el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"   width="130">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="operationFn('detail',scope.row)">详情</el-button>
          <el-button size="mini" type="text" v-if="ifShow(1,scope.row)" @click="operationFn('update',scope.row)">修改</el-button>
          <el-button size="mini" type="text" v-if="ifShow(0,scope.row)" @click="operationFn('delete',scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getTableDataFn">
    </pagination>

    <dialog-list-form v-if="dialogData.visible" :propVisible.sync="dialogData.visible" :propTitle="dialogData.title" :propFormData.sync="dialogData.formData" :propDictData="dictData"></dialog-list-form>
  </div>
</template>

<script>
  import Mock from 'mockjs';
  import dialogListForm from './components/dialog.list.form.vue';
  import { apiGetDicts } from '@/api/system/dict/data.js';
  import { apiProjectManageList,apiProjectManageDelete } from '@/api/pmp/api.pipline.js';

  export default {
    components: {
      dialogListForm
    },
    data (){
      return {
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          projectName: null,
          salemanName: null,
          projectLocation: null,
          projectStatus: null
        },
        //dictData.projectStatus: [],
        dictData: {
          projectStatus: [],
          projectType: [],
          approval: []
        },
        tableData: [],
        dialogData: {
          visible: undefined,
          title: undefined,
          formData: undefined
        }
      };
    },
    filters: {
      fltMember (data){
        var arr = [];
        data.map((v,i) => {
          arr.push(v.userName);
        });
        return arr.join('，');
      },
      fltProjectStatus (val){
        switch (+val){
        case 1:
          return '跟进中';
          break;
        case 2:
          return '投标中';
          break;
        case 3:
          return '研发中';
          break;
        case 4:
          return '挂起中';
          break;
        case 5:
          return '已验收';
          break;
        case 6:
          return '已废弃';
          break;
        case 7:
          return '已关闭';
          break;
        default:
          // statements_def
          break;
        }
      },
      fltProjectType (val){
        switch (+val){
        case 1:
          return '电商';
          break;
        case 2:
          return '金融';
          break;
        case 3:
          return '地产';
          break;
        default:
          // statements_def
          break;
        }
      }
    },
    mounted (){
      this.getDictDataFn();
      this.getTableDataFn();
    },
    methods: {
      //判断修改、删除显示状态
      ifShow(type, row){
        if(type){
          // 修改
          return (row.projectStatus || 0) != 7 && (row.projectStatus || 0) != 6;
        } else {
          // 删除
          return row.projectStatus == 6;
        }
      },
      //获取项目状态
      getDictDataFn (){
        apiGetDicts('pmp_project_status')
          .then(res => {
            //console.log('res:',res);
            this.dictData.projectStatus = res.data;
          });
        apiGetDicts('pmp_project_type')
          .then(res => {
            //console.log('res:',res);
            this.dictData.projectType = res.data;
          });
        // 暂定在前端写死是否立项的状态位 0:是;1:否;2:内部;
        this.dictData.approval = [
          { dictLabel:'是', dictValue:0 },
          { dictLabel:'否', dictValue:1 },
          { dictLabel:'内部', dictValue:2 }
        ];
      },
      //获取表格数据
      getTableDataFn (){
        this.loading = true;
        console.log('queryParams:',this.queryParams);
        //this.mockGetList(this.queryParams)
        apiProjectManageList(this.queryParams)
          .then(res => {
            console.log('res:',res);
            this.loading = false;
            this.total = res.total;
            this.tableData = res.rows;
          });
      },
      //假数据接口
      mockGetList(queryParams){
        console.log('queryParams:',queryParams);
        var data = Mock.mock({
          'total|10-100':11,
          'rows|1-10': [{
            'projectId|+1': 10000,
            'projectName|1': ['平安金融系统','Zoom','京东商城'],
            'salemanName': '@cname',
            'salemanId|+1': 9527,
            'principalName': '@cname',
            'principalId+1': 54897,
            'projectLocation': '@province',
            'projectType|1-3': 1,
            'projectAmount|50-1000': 50,
            'planStartTime': Mock.Random.date(),
            'planTime|1-24':1,
            'projectStatus|1-6': 1,
            'member|2-5': [
              {
                'userid|+1': 8767,
                'userName': '@cname'
              }
            ],
            'remark':'@csentence',
          }]
        });
        return Promise.resolve(data);
      },
      //查询
      handleQueryFn (){
        console.log('查询');
        this.queryParams.pageNum = 1;
        this.getTableDataFn();
      },
      //重置
      resetQueryFn (){
        console.log('重置');
        //this.resetForm("queryForm");
        this.$refs['queryForm'].resetFields();
        this.handleQueryFn();
      },
      /**
       * 操作 - 增删改查
       */
      operationFn (type,row){
        console.log('type:',type,'\n','row:',row);
        switch (type){  //add 新增、detail详情、update修改、delete删除
        case 'add':
          this.operationAddFn();
          break;
        case 'detail':
          this.operationDetailFn(row);
          break;
        case 'update':
          this.operationUpdateFn(row);
          break;
        case 'delete':
          this.operationDeleteFn(row);
          break;
        default:
          // statements_def
          break;
        }
      },
      /**
       * 操作 - 新增
       */
      operationAddFn (){
        this.dialogData.visible = true;
        this.dialogData.title = '新增';
      },
      /**
       * 操作 - 查看
       */
      operationDetailFn (row){
        console.log('row:',row);
        this.dialogData.visible = true;
        this.dialogData.title = '详情';
        this.dialogData.formData = JSON.parse(JSON.stringify(row));
      },
      /**
       * 操作 - 修改
       */
      operationUpdateFn (row){
        this.dialogData.visible = true;
        this.dialogData.title = '修改';
        this.dialogData.formData = JSON.parse(JSON.stringify(row));
      },
      /**
       * 操作 - 删除
       */
      operationDeleteFn (row){
        var vm = this;
        this.$confirm('是否删除该项目？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            apiProjectManageDelete(row.projectId)
              .then(res => {
                console.log('删除成功：',res);
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1 * 1000,
                  onClose: function(){
                    vm.getTableDataFn();
                  }
                });
              });
          });
      }
    }
  };
</script>
